<template>
  <div class="control">
    <div class="top">
      <div>限高分析</div>
    </div>
    <div class="params">
      <div class="item">
        <div class="label">
          <div>限制高度</div>
          <div style="color: #b6b6cf">({{ elevation }}m)</div>
        </div>
        <div class="content">
          <div class="range">
            <input class="range11" type="range" v-model="elevation" :min="0" :max="300" />
          </div>
        </div>
      </div>

      <div class="item">
        <div class="label">超出颜色</div>
        <div class="content">
          <input type="color" v-model="color" style="width: 100%" />
        </div>
      </div>
      <div class="item">
        <div class="label">不透明度</div>
        <div class="content">
          <input type="number" v-model="opacity" style="width: 100%" :min="0" :max="1" :step="0.1" />
        </div>
      </div>
      <div class="item">
        <div class="label">限高面</div>
        <div class="content">
          <input type="checkbox" v-model="areaShow" />
          是否显示限高面
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
import { getAdministrativeDivisionCity } from '@/api/home'
// 高度
const elevation = ref(100)

// 颜色
const color = ref('#ff0000')

// 透明度
const opacity = ref(0.4)

// 限高面是否显示
const areaShow = ref(true)

let coordinates_polygon: any = null

const addHighlightAreaLayer = async () => {
  const { data } = await getAdministrativeDivisionCity()
  const coordinates = data.features[0].geometry.coordinates[0][0]
  coordinates_polygon = coordinates

  let o = {
    id: 'highlightArea',
    coordinates: coordinates,
    coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
    color: toColorArr(color.value, opacity.value), //多边形高亮颜色
    heightRange: [elevation.value, 1000], //高亮染色区域可以限定一个高度范围，也就是Z坐标的区间，只有Z值这这个区间的模型才会被染色
    intensity: 1.0, //高亮颜色的强度
    depthTest: true //深度检测
  }
  await fdapi.highlightArea.add(o)

  let p1 = {
    id: 'highlight_polygon',
    coordinates: coordinates.map((c: number[]) => [c[0], c[1], Number(elevation.value)]),
    coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
    range: [1, 10000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
    color: [1, 1, 0, 0.2], //多边形的填充颜色
    intensity: 1, //亮度
    style: 0, //单色 请参照API开发文档选取枚举
    depthTest: true, //是否做深度检测 开启后会被地形高度遮挡
    priority: 1 //显示优先级 值越大显示越靠上
  }
  await fdapi.polygon.add(p1)
}
// 设置颜色
const setColor = () => {
  fdapi.highlightArea.setColor('highlightArea', toColorArr(color.value, opacity.value))
}
// 设置高度范围
const setHeightRange = () => {
  fdapi.highlightArea.setHeightRange('highlightArea', [Number(elevation.value), 1000])
  fdapi.polygon.setCoordinates(
    'highlight_polygon',
    coordinates_polygon.map((c: number[]) => [c[0], c[1], Number(elevation.value)])
  )
}
// 设置限高面显隐
const setPolygonShow = () => {
  if (areaShow.value) {
    fdapi.polygon.show('highlight_polygon')
  } else {
    fdapi.polygon.hide('highlight_polygon')
  }
}

// 防抖
const debounce = (func: Function, wait: number) => {
  let timeout: any = null
  return function () {
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(() => {
      func()
    }, wait)
  }
}

watch(color, debounce(setColor, 100))
watch(opacity, debounce(setColor, 100))
watch(elevation, debounce(setHeightRange, 100))
watch(areaShow, debounce(setPolygonShow, 100))

/**
 * 16进制颜色转[1,0,0,0]，附上透明度
 * @param sColor 16进制颜色
 * @param opacity 透明度
 * @returns {*[]|*}
 */
const toColorArr = (sColor: string, opacity: number) => {
  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      var sColorNew = '#'
      for (var i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
      }
      sColor = sColorNew
    }
    //处理六位的颜色值
    var sColorChange = []
    for (var i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)) / 255)
    }
    sColorChange.push(opacity)
    return sColorChange
  } else {
    return sColor
  }
}

onMounted(() => {
  fdapi.camera.set(565555.903828, 3466773.747764, 536.138906, -12.565546, 170.855652, 2)
  addHighlightAreaLayer()
})

onBeforeUnmount(() => {
  fdapi.highlightArea.delete('highlightArea')
  fdapi.polygon.delete('highlight_polygon')
})
</script>

<style scoped type="scss">
.control {
  width: 250px;
  max-height: 90vh;
  position: absolute;
  background: url('./images/popup_content.png') no-repeat;
  background-size: 100% 100%;
  z-index: 10;

  right: 360px;
  bottom: 70px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  border-radius: 20px;
}

.control .top {
  width: calc(100% - 20px);
  font-family: Tencent;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 15px;
  font-weight: bold;
  font-size: 18px;
  color: #ffffff;
  border-radius: 20px;
}

.control .params {
  width: calc(100% - 40px);
  max-height: calc(100% - 60px);
  overflow-y: auto;
  padding: 10px 20px;
  padding-bottom: 20px;
}

.params .title {
  color: #ffffff;
  font-family: Tencent;
  margin-bottom: 10px;
}

.params .item {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.params .item .label {
  width: 100px;
  text-align: center;
}

.params .item .content {
  width: 220px;
  display: flex;
  align-items: top;
  justify-content: space-around;
}

.params .item .content span {
  color: rgba(0, 0, 0, 0.2);
  font-size: 12px;
}

input[type='color'] {
  width: 50px;
  height: 25px;
  border: 0;
  outline: none;
  border-radius: 5px;
}

input[type='color']::-webkit-color-swatch-wrapper {
  border-radius: 5px;
  padding: 0;
}

input[type='color']::-webkit-color-swatch {
  /* height: 20px;
    width: 55px; */
  position: relative;
  /* left: -4px;
    top: -4px; */
  border: 0;
  border-radius: 5px;
  border: 1px rgba(0, 0, 0, 0.2) solid;
}

input[type='number'] {
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  border: 1px solid #343a41;
  border-radius: 5px;
  padding: 0px 5px;
}

input[type='checkbox'] {
  width: 18px;
  height: 18px;
  background-color: rgba(0, 0, 0, 0.2) !important;
}

.range {
  position: relative;
  height: 200px;
  width: 50px;
  overflow: hidden;
}

input[type='range'] {
  position: absolute;
  transform: rotate(270deg);

  width: 200px;
  left: -75px;
  bottom: 92px;
}
</style>
